<template>
<h1>v-for的高级应用</h1>
<!-- v-for的更新操作
数组截取：一般指的是从数组里提取出一部分元素，
并且会改变原数组，像 splice() 方法就属于这种操作。
在 v-for 中使用时，它能够动态地改变用于渲染的数据。
数组切片：指的是创建一个新数组，
该数组包含了原数组指定部分的元素，原数组不会被改变，
slice() 方法就是这样的操作。
在 v-for 中使用，可用于渲染原数组的特定部分，同时不影响原数组。
  使用方法：
  数组翻转：reverse()
  数组排序：sort()
  数组拼接：push()、pop()
  数组截取：splice()
  数组连接：concat()
  数组切片：slice()
  数组索引：indexOf()、lastIndexOf()
  数组遍历：forEach()
  数组映射：map()
  数组过滤：filter()
  数组查找：find()、findIndex()
  这里只展示数组切片、数组翻转、数组更新以及数组过滤这几个方法的使用。
  -->
  <ul>
        <li v-for="(item,index) in arr" :key="index">
            {{ item }}
        </li>
    </ul>
    <button @click="revbtn">数组翻转</button>
    <button @click="sliceBtn">数组切片</button>
    <button @click="uploadBtn">数组更新</button>
    <button @click="filterbtn">数组过滤</button>
<!--搜索-->
<div>
        <input type="text" v-model="search">
        <ul>
            <li v-for="item in searchFn()" :key="item">
                {{ item }}
            </li>
        </ul>
    </div>

</template>

<script setup>
import { ref } from 'vue'
const arr = ref([1, 2, 3, 4, 5, 6])
const arr2 = ref([7,8,9,10])

const revbtn = () => { 
    //数组翻转 可以直接更新
    arr.value.reverse()
}
const sliceBtn = () => { 
    //数组切片

    console.log(arr.value.slice(0, 3));
    arr.value = arr.value.slice(0, 3)
}
const uploadBtn = () => { 
    //数组更新 直接赋值可以造成数组更新，如果采用拼接的模式不会进行数组更新了
    // arr.value[5]=7
    console.log(arr.value.concat([7, 8]));
    const newarr = arr.value.concat(arr2.value)
    console.log(newarr);
   arr.value = newarr
   
}
const filterbtn = () => { 
   let arrfile= arr.value.filter((item) => { 
        return item <5 
   })
    console.log(arrfile);
   /**
    * 三个参数： value 当前数组的值 
    * index 当前数组的索引
    * arr 当前数组本身
    */
  let arrfil=  arr.value.filter(function (value, index, arr) { 
        console.log(index);
        
        return value < 5
     })
    console.log(arrfil);
    // 只有一个的话
    arr.value = arr.value.filter((item) => item < 5)
    
}
//搜索框
const search = ref('')
const strarr = ref(["aaa", "bbb", "ccc", "aab", "abc", "aca", "bbc", "bbd", "bbe"])

const searchFn = () => { 
    // 过滤出包含搜索关键词的数组元素
    let searchVal = strarr.value.filter(item => item.includes(search.value.trim()))
    // 打印过滤后的数组
     console.log(searchVal);
    // 返回过滤后的数组
    return searchVal
    
}
</script>

<style scoped>

</style>